﻿
@{
    Layout = null;
    string guid = "g" + Guid.NewGuid().ToString().Replace("-", "");
}
<style type="text/css">
    .ztree li span.button.add {
        margin-left: 2px;
        margin-right: -1px;
        background-position: -144px 0;
        vertical-align: top;
        *vertical-align: middle;
    }
</style>
<script>
    var setting = {
        async: {
            enable: true,
            url: "/SysModule/GetMenuTree",
            autoParam: ["id", "name=n", "level=lv"],
            otherParam: { "otherParam": "zTreeAsyncTest" },//额外的参数
            dataFilter: filter
        },
        view: {
            expandSpeed: "",
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom,
            selectedMulti: false
        },
        edit: {
            enable: true//编辑和删除按钮的显示隐藏
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeRemove: beforeRemove,
            beforeRename: beforeRename,
            beforeEditName: beforeEditName,
            onAsyncSuccess: onAsyncSuccess
        }
    };

    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        for (var i = 0, l = childNodes.length; i < l; i++) {
            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
        }
        return childNodes;
    }
    //点击编辑按钮时触发
    function beforeEditName(treeId, treeNode) {

        var pid = 0;//此处无法直接获取到父节点，不知道为什么
        var id = treeNode.id;
        $.get("/SysModule/Edit", { parentId: pid, id: id }, function (html) {
            $("#mainTabContent div.active").find(".menuContent").html(html);
            $("#mainTabContent div.active").find("#ModuleName").get(0).focus();//强制获取焦点
            //提交数据
            $("#mainTabContent div.active").find(".formSubmit").click(function () {
                var arr = $("#mainTabContent div.active").find("#form1").serialize();
                ajaxPost("/SysModule/Edit", arr, function (data) {
                    debugger;
                    var arr = data.msg.split(":");
                    if (arr[0] == "add") {
                        ShowSuccess("添加成功");
                    } else if (arr[0] == "edit") {
                         treeNode.name = $("#mainTabContent div.active").find("#ModuleName").val();
                        $.fn.zTree.getZTreeObj("moduleTree@(guid)").updateNode(treeNode);
                        ShowSuccess("修改成功");
                    } else {
                        ShowError("操作失败");
                    }
                    return false;
                });
             
            });
        });
    }
    //编辑结束，失去焦点
    function beforeRename(treeId, treeNode, newName) {
        if (newName.length == 0) {
            setTimeout(function () {
                var zTree = $.fn.zTree.getZTreeObj("moduleTree@(guid)");
                zTree.cancelEditName();
                ShowInfo("节点名称不能为空.");
            }, 0);
            return false;
        }
        return true;
    }

    var newCount = 1;
    function addHoverDom(treeId, treeNode) {
        var sObj = $("#mainTabContent div.active").find("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#mainTabContent div.active").find("#addBtn_" + treeNode.tId).length > 0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
            + "' title='add node' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#mainTabContent div.active").find("#addBtn_" + treeNode.tId);
        if (btn) btn.bind("click", function () {
            var zTree = $.fn.zTree.getZTreeObj("moduleTree@(guid)");
            var pid = treeNode.id;
            $.get("/SysModule/Edit", { parentId: pid }, function (html) {
                $("#mainTabContent div.active").find(".menuContent").html(html);
                //提交数据
                $("#mainTabContent div.active").find(".formSubmit").click(function () {
                    var arr = $("#mainTabContent div.active").find("#form1").serialize();
                    ajaxPost("/SysModule/Edit", arr, function (data) { 
                        var arr = data.msg.split(":");
                        if (arr[0] == "add") {
                            ShowSuccess("添加成功");
                            zTree.addNodes(treeNode, { id: arr[1], pId: treeNode.id, name: $("#mainTabContent div.active").find("#ModuleName").val() });
                        } else if (arr[0] == "edit") {
                            ShowSuccess("修改成功");
                        } else {
                            ShowError("操作失败");
                        }

                    });
              
                });
            });

        });
    };

    function beforeRemove(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("moduleTree@(guid)");
        zTree.selectNode(treeNode);
        var id = treeNode.id;
        if (confirm("确认删除节点[" + treeNode.name + "] 吗？")) {
            ajaxGet("/SysModule/Delete/"+id, null, function (data) { 
                ShowSuccess("删除成功");

            }, "json");
           
            return true;
        }
        return false;

    }
    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_" + treeNode.tId).unbind().remove();
    };
    function onAsyncSuccess(event, treeId, treeNode, msg) {
        msg = eval('(' + msg + ')');
        if (msg.code == 400 || msg.code == 401 || msg.code == 500) {
            ShowError(msg.msg);
            if (msg.code == 400) {
                location.href = "/Account/Login";
            }
            return;
        }
        expandNodes();
    }
    //展开第二层
    function expandNodes() {
        var firstAsyncSuccessFlag = 0;
        if (firstAsyncSuccessFlag == 0) {
            try {
                var zTree = $.fn.zTree.getZTreeObj("moduleTree@(guid)");
                //调用默认展开第一个结点
                var selectedNode = zTree.getSelectedNodes();
                var nodes = zTree.getNodes();
                zTree.expandNode(nodes[0], true);
                firstAsyncSuccessFlag = 1;
            } catch (err) {

            }
        }
    }
    $(document).ready(function () {
        $.fn.zTree.init($("#moduleTree@(guid)"), setting);

    });

</script>
<div class="page-content" id="@guid">
    <div class="row">
        <div class="col-sm-4" style="padding-right:0px;">
            <div class="widget-box">
                <div class="widget-header">
                    <h4 class="lighter smaller">菜单树</h4>
                </div>

                <div class="widget-body">
                    <div class="widget-main padding-8">
                        <div id="moduleTree@(guid)" class="ztree">

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-8" style="padding-left:5px;">
            <div class="widget-box">
                <div class="widget-header">
                    <h4 class="lighter smaller">编辑</h4>
                </div>

                <div class="widget-body">
                    <div class="widget-main padding-8">
                        <div class="table-responsive menuContent">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

